<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="文档">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="watch-ref">
      <ol>
        <li>基本类型 title:{{ title }}<Button @click="title += '-@'">修改</Button></li>
        <li>基本类型 clickCnt:{{ clickCnt }}<Button @click="clickCnt += 1">修改</Button></li>
      </ol>
      <template #action>
        <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getSource())" />
      </template>
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
  import { Button } from '@/components/Button';
  import SourceDrawer from '@/learn/SourceDrawer.vue';
  import { Icon } from '@/components/Icon';
  // 需要引入 computed 方法
  import { ref, watchEffect } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  // 定义子组件引用
  let sourceDrawer = ref<any>(null);
  function openSource(title: string, content: string) {
    sourceDrawer.value.open({ title, content, width: '60%' });
  }

  let title = ref<string>('一级标题');
  let clickCnt = ref<number>(0);

  watchEffect(() => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, 原数组:' + title.value);
  });

  watchEffect(() => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, title:' + title.value + ', subTitle:' + clickCnt.value);
  });
</script>

<script lang="ts">
  function getDoc() {
    return `
### watchEffect 自动监视
* watchEffect 不用指定监视的元素，会自动推断要监视的元素
* watchEffect 虽然可以简化有限的代码，但是却会带来一定的复杂度和不确定性，所以不推荐使用，了解即可

`;
  }

  function getSource() {
    return `
\`\`\`html
<template>
  <CollapseContainer class="mt-5" title="watch-ref">
    <ol>
      <li>基本类型 title:{{ title }}<Button @click="title += '-@'">修改</Button></li>
      <li>基本类型 clickCnt:{{ clickCnt }}<Button @click="clickCnt += 1">修改</Button></li>
    </ol>
    <template #action>
      <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getSource())" />
    </template>
  </CollapseContainer>
</template>

\<script lang="ts" setup\>
  import { ref, watch } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  
  let title = ref<string>('一级标题');
  let clickCnt = ref<number>(0);

  watchEffect(() => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, 原数组:' + title.value);
  });

  watchEffect(() => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, title:' + title.value + ', subTitle:' + clickCnt.value);
  });
\</script\>
\`\`\`
`;
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }
</style>
